<template>
  <div class="goc-editor-page">
    <!-- <div class="page-header">
      <h1>TOC在线编辑器</h1>
      <p>在线编写和运行TOC代码</p>
    </div> -->
    
    <div class="editor-container">
      <GocEditor 
        ref="gocEditorRef"
        v-model="code"
        :read-only="false"
        theme="vs-dark"
        :width="'100%'"
        :height="'100%'"
        @run-start="onRunStart"
        @run-end="onRunEnd"
        @error="onError"
      />
    </div>
  </div>
</template>

<script setup>
import { ref, onBeforeUnmount } from 'vue'
import GocEditor from '../components/GocEditor.vue'
import logger from '../utils/logger.js'

// 编辑器引用
const gocEditorRef = ref(null)

// 编辑器代码内容
const code = ref(`int main() {
  // 在这里编写你的代码
  return 0;
}`)

// 运行开始事件
const onRunStart = () => {
  logger.log('🚀 代码开始运行')
}

// 运行结束事件
const onRunEnd = () => {
  logger.log('✅ 代码运行完成')
}

// 错误事件
const onError = (error) => {
  logger.error('❌ 代码运行出错:', error)
}

// 页面卸载前清理
onBeforeUnmount(() => {
  logger.log('🧹 [GocEditorPage] 页面即将卸载，清理编辑器资源')
  
  // 如果编辑器正在运行，先停止
  if (gocEditorRef.value) {
    try {
      gocEditorRef.value.stop()
      logger.log('✅ [GocEditorPage] 编辑器停止完成')
    } catch (error) {
      logger.warn('⚠️ [GocEditorPage] 停止编辑器时出错:', error)
    }
  }
  
  logger.log('✅ [GocEditorPage] 页面清理完成')
})
</script>

<style scoped>
.goc-editor-page {
  min-height: calc(100vh - 120px); /* 减去导航栏和页脚的高度 */
  background: #f5f5f5;
  padding: 20px;
  margin: 0;
  display: flex;
  flex-direction: column;
  width: 100%;
  box-sizing: border-box;
}

/* .page-header {
  text-align: center;
  background: white;
  padding: 20px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  flex-shrink: 0;
}

.page-header h1 {
  color: #2c3e50;
  font-size: 2rem;
  margin: 0 0 5px 0;
  font-weight: 600;
}

.page-header p {
  color: #7f8c8d;
  font-size: 1rem;
  margin: 0;
} */

.editor-container {
  background: white;
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 800px; /* 设置固定高度 */
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .page-header {
    padding: 15px;
  }
  
  .page-header h1 {
    font-size: 1.5rem;
  }
  
  .page-header p {
    font-size: 0.9rem;
  }
}
</style>
